import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "../store";

Vue.use(VueRouter)

const routes = [
    /*{
        path: '/',
        component: () => import(/!* webpackChunkName: "about" *!/ '../views/Manage.vue'),
        redirect: "/home",
        children: [
            {path: 'home', name: '首页', component: () => import( '../views/Home.vue')},
            {path: 'user', name: '用户管理', component: () => import( '../views/User.vue')},
            {path: 'role', name: '角色管理', component: () => import( '../views/Role.vue')},
            {path: 'menu', name: '菜单管理', component: () => import( '../views/Menu.vue')},
            {path: 'person', name: '个人信息', component: () => import('../views/Person.vue')},
            {path: 'file', name: '文件管理', component: () => import('../views/File.vue')}
        ]
    },*/
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
    },
    {
        path: '/register',
        name: 'Register',
        component: () => import(/* webpackChunkName: "about" */ '../views/Register.vue')
    },
    {
        path: '/404',
        name: '404',
        component: () => import(/* webpackChunkName: "about" */ '../views/404.vue')
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
});

//重置路由
export  const resetRouter=()=>{
    router.matcher  = new VueRouter({
        mode: 'history',
        base: process.env.BASE_URL,
        routes//固定路由
    })
};
//刷新页面会导致页面重置
export const setRoutes = () => {
    const storeMenus = localStorage.getItem("menus")
    if (storeMenus) {//如果有路由就拼装动态路由
        const manageRoute = {path: '/', name:'Manage', component: () => import('../views/Manage.vue'), redirect: "/home", children: [
                {path: 'person', name : '个人信息', component: () => import('../views/Person.vue')},
                {path: 'password', name: '修改密码', component: () => import('../views/File.vue')}
            ]};

        const menus = JSON.parse(storeMenus);
        menus.forEach(item => {
            if (item.path) {//仅当path不为空的时候才设置路由
                let itemMenu = {path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue')
                };
                manageRoute.children.push(itemMenu)
            } else if (item.children.length) {

                item.children.forEach(item => {
                    if (item.path) {
                        let itemMenu={path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue')}
                        manageRoute.children.push(itemMenu)
                    }
                })
            }

        });

        //动态添加到现在的路由对象中去
        // router.addRoute(manageRoute)//路由重复
        const currentRouteNames = router.getRoutes().map(v=>v.name)
        if(!currentRouteNames.includes('Manage')){//获取当前的路由对象名称数组，当包含动态路由的时候，再添加路由
            //动态添加到现在的路由对象中去
            router.addRoute(manageRoute)
        }
    }
};
//重置就再set一次路由
setRoutes();
/*router.addRoute({
        path: '/',
        component: () => import('../views/Manage.vue'),
        redirect: "/home",
        children: [
            {path: 'home', name: '首页', component: () => import( '../views/Home.vue')},
            {path: 'user', name: '用户管理', component: () => import( '../views/User.vue')},
            {path: 'role', name: '角色管理', component: () => import( '../views/Role.vue')},
            {path: 'menu', name: '菜单管理', component: () => import( '../views/Menu.vue')},
            {path: 'person', name: '个人信息', component: () => import('../views/Person.vue')},
            {path: 'file', name: '文件管理', component: () => import('../views/File.vue')}
        ]
    },
)*/
//路由守卫
router.beforeEach((to, from, next) => {
    // console.log(from)
    localStorage.setItem("currentPathName", to.name);//设置当前的路由名称，为了在Header组件中去使用
    store.commit("setPath");//触发store的数据更新
    ;
    //未找到的情况
    if(!to.matched.length===0){
        const storeMenus = localStorage.getItem("menus")
        if(storeMenus){//存在，说明用户有权限菜单了
            next("/404")//(登录之间)
        }else {
            //调回登录页面
            next("/login")
        }
    }
    //其他情况放行
    next();


});

export default router
